import { RADIO_CHECKBOX_TYPE, RADIO_CHECKBOX_TYPE_MAP } from '@/common/const'
import { EventBus } from '@/store/index'
import { getPxOVwByValue, getPxOrVw } from '@/store/utils'

export const radioCheckbox = {
  created () {
    const data_ = {
      RADIO_CHECKBOX_TYPE: RADIO_CHECKBOX_TYPE,
      RADIO_CHECKBOX_TYPE_MAP: RADIO_CHECKBOX_TYPE_MAP,
      currentIndex: -1,
      text: '',
    };
    for(let key in data_) {
      this[key] = data_[key];
    }
  },
  computed: {
    iconSize(){
      return getPxOVwByValue(this.commonAttr.itemStyles.fontSize);
    },
    activeIcon(){
      return this.commonAttr.selectedStyles.url
    },
    inactiveIcon(){
      return this.commonAttr.itemStyles.url
    },
    flexDirection(){
      //这个写反了，已经有很多站点，只能是反的了
      return {
        flexDirection: this.item.commonAttr.isColumn ? 'row' : 'column'
      }
    },
    titleStyle(){
      let fontSize = this.commonAttr.fontSize_ ? this.commonAttr.fontSize_ : 24;
      if(fontSize < 24){
        fontSize = 24
      }
      return {
        height: getPxOVwByValue(fontSize*1.5),
      }
    },
    commonStyle(){
      let style_ = {};
      let styles = this.item.styles;
      if(styles) {
        style_.color = styles.color;
        style_.fontSize = styles.fontSize;
      }
      return style_;
    },
    itemStyle() {
      let unit = getPxOrVw()
      let style_ = {};
      let styles = this.item.styles;
      if(styles) {
        style_.color = styles.color;
      }
      style_.margin = 0 + ' ' + this.commonAttr.marginLR + unit;
      style_.padding = this.commonAttr.paddingTB + unit + ' ' + this.commonAttr.paddingLR + unit;
      return style_;
    },
    itemConStyle() {
      let unit = getPxOrVw()
      let commonAttr = this.item.commonAttr
      let itemMarginTB = commonAttr.marginTB

      let style_ = {}
      style_.margin = itemMarginTB + unit + ' ' + 0
      style_.width = this.COLUMN_PERCENT[this.item.commonAttr.columnNum]
      return style_
    },
    radioCheckboxBtnStyle_(){
      let unit = getPxOrVw()
      return {
        fontSize: this.commonAttr.itemStyles.fontSize + unit,
        color: this.commonAttr.itemStyles.color + unit,
      }
    },
    iconStyle(){
      if(this.commonAttr.iconWidth > 0){
        return {
          width: getPxOVwByValue(this.commonAttr.iconWidth),
          height: getPxOVwByValue(this.commonAttr.iconHeight),
        }
      }else{
        return {}
      }
    }
  },
  methods: {
    radioCheckboxColor(index){
      if(this.radioSelected - 1 == index){
        return this.commonAttr.selectedStyles.backgroundColor
      }else{
        return this.commonAttr.itemStyles.backgroundColor
      }
    },
    radioCheckboxBtnStyle(index){
      let commonAttr = this.item.commonAttr
      let unit = getPxOrVw()
      let btnBgUrl = commonAttr.itemStyles.btnBgUrl
      let isBtnBgUrl = btnBgUrl && btnBgUrl.length > 0
      let itemBgcolor
      let itemTextColor

      let wid
      let hei = "auto"
      if(commonAttr.itemType == RADIO_CHECKBOX_TYPE_MAP.btnSelectedFrame){
        if(commonAttr.columnNum < 4){
          wid = "80%"
        }else{
          wid = "70%"
        }
      }else{
        wid = "100%"
      }
      if(isBtnBgUrl && commonAttr.itemWidth && commonAttr.itemWidth > 0){
        wid = commonAttr.width + unit
        hei = commonAttr.height + unit
      }
      if(commonAttr.isEachSelectedColor){
        itemBgcolor = this.item.lists[index].bgColor
        itemTextColor = this.item.lists[index].textColor
      }else{
        itemBgcolor = commonAttr.itemStyles.backgroundColor
        itemTextColor = commonAttr.itemStyles.color
      }
      let fontFamily = ''
      if(commonAttr.customFontStyle){
        let arr = commonAttr.customFontStyle.split(",");
        fontFamily = arr[0];
      }
      let fontWeight = this.item.styles ? this.item.styles.fontFamily : this.commonAttr.fontFamily
      let textAlign = this.item.styles ? this.item.styles.textAlign : this.commonAttr.textAlign
      const style = {
        padding: commonAttr.itemPaddingTB + unit + ' ' +  commonAttr.itemPaddingR + unit + ' ' + commonAttr.itemPaddingTB + unit + ' ' + commonAttr.itemPaddingL + unit,
        margin: commonAttr.itemMarginTB + unit + ' ' +  commonAttr.itemMarginR + unit + ' ' + commonAttr.itemMarginTB + unit + ' ' + commonAttr.itemMarginL + unit,
        borderRadius: commonAttr.itemBorderRadius + unit,
        border: commonAttr.itemBorderStyle ? commonAttr.itemBorderSize + unit + ' ' +  commonAttr.itemBorderStyle + ' ' + commonAttr.itemBorderColor : "none",
        color: itemTextColor,
        backgroundColor: itemBgcolor,
        fontSize: commonAttr.itemStyles.fontSize + unit,
        lineHeight: commonAttr.itemStyles.lineHeight,
        letterSpacing: commonAttr.itemStyles.letterSpacing + unit,
        fontWeight,
        justifyContent: textAlign,
        width: wid,
        height: hei,
        fontFamily
      }
      if(btnBgUrl){
        style.backgroundImage = 'url(' + btnBgUrl + ')';
        style.backgroundRepeat = 'no-repeat';
      }
      return style
    },
    onRadio(e, index){
      if(this.isH5Edit){
        return
      }
      //当前页面有提交按钮就阻止事件冒泡
      if(e){
        e.stopPropagation()
        e.preventDefault()
      }
      if(this.btnRefs.length > 0){
        if(this.currentIndex >= 0){
          //重置btn状态
          let btn_ = this.btnRefs[this.currentIndex]

          btn_.isSelected = false
          this.setBtnCommon(btn_, this.currentIndex)
        }
        let btn = this.btnRefs[index]
        btn.isSelected = !btn.isSelected;
        if(btn.isSelected){
          this.setBtnSelected(btn, index)
        }else{
          this.setBtnCommon(btn, index)
        }
      }
      this.radioSelected = index+1
      let val = this.item.lists[index].text
      this.commonAttr.itemIndex = index
      this.$store.commit('updateFormValue', {id: this.item.id, value: val, item: this.item.lists[index]})
      this.$store.commit("updateInteractionData", { swiperIndex: index });
      this.currentIndex = index


      if(this.commonAttr.isNotForm){
        //选择了那个选项，将数据存储起来，在最后使用
        let interactionData_ = _.cloneDeep(this.interactionData);
        interactionData_.clickCompIdMap.set(this.item.id, this.item.lists[index])
        this.$store.commit('updateInteractionData', interactionData_);
      }

      if(this.interactionData.isEmitClick){
        EventBus.$emit("itemClick", {id: this.item.id, index});
      }

      let jumpUrl = 'radio_' + index
      let comType = "click"
      let wModule = "jump"
      this.onPostStatics(e, { comType, wModule,  jumpUrl })
    },
    onRadioInput(){
      let compId = this.item.id
      let radioText = this.formValues[compId].value ? this.formValues[compId].value : ''
      this.$store.commit('updateFormValue', {id:this.item.id, value: radioText + this.otherText})
      let jumpUrl = 'radio_input'
      let comType = "input"
      let wModule = "jump"
      let e = null
      this.onPostStatics(e, { comType, wModule,  jumpUrl })
    },
    onCheckbox(e, index){
      if(this.isH5Edit){
        return
      }
      if(e){
        e.stopPropagation()
        e.preventDefault()
      }

      let btn = this.btnRefs[index]
      btn.isSelected = !btn.isSelected
      let index_ = this.selecteds.indexOf(index+1)
      if(btn.isSelected){
        this.setBtnSelected(btn, index)
        if(index_ == -1){
          this.selecteds.push(index+1)

        }
      }else{
        this.setBtnCommon(btn, index)
        if(index_ != -1){
          this.selecteds.splice(index_, 1)
        }
      }
      let value = '';
      let lists = this.wbListOrLists;
      _.forEach(this.selecteds, (index) => {
        value += lists[index-1].text + '，'
      })
      this.$store.commit('updateFormValue', {id: this.item.id, value, selecteds: this.selecteds, lists})
      let jumpUrl = 'checkbox_' + index
      let comType = "click"
      let wModule = "jump"
      this.onPostStatics(e, { comType, wModule,  jumpUrl })

      // EventBus.$emit("refreshBindText")
    },
    onCheckboxInput(text){
      this.text = text
      this.$store.commit('updateFormValue', { id:this.item.id, value: this.text, selecteds: this.selecteds, lists: this.wbListOrLists })
      let jumpUrl = 'checkbox_input'
      let comType = "input"
      let wModule = "jump"
      let e = null
      this.onPostStatics(e, { comType, wModule,  jumpUrl })
    },
    setBtnSelected(btn, index){
      let commonAttr = this.item.commonAttr
      window.setTimeout(() => {
        if(commonAttr.isEachSelectedColor){
          let itemStyle = this.item.lists[index]
          btn.style.color = itemStyle.selectedTextColor
          btn.style.backgroundColor = itemStyle.seletedBgColor
          btn.style.backgroundImage = "url()"
        }else{
          btn.style.color = commonAttr.selectedStyles.color
          btn.style.backgroundColor = commonAttr.selectedStyles.backgroundColor
          btn.style.backgroundImage = 'url(' + commonAttr.selectedStyles.btnBgUrl + ')'
        }
      }, 50)
    },
    setBtnCommon(btn, index){
      let commonAttr = this.item.commonAttr
       if(commonAttr.isEachSelectedColor){
        let itemStyle = this.item.lists[index]
        btn.style.color = itemStyle.textColor
        btn.style.backgroundColor = itemStyle.bgColor
      }else{
        btn.style.color = commonAttr.itemStyles.color
        btn.style.backgroundColor = commonAttr.itemStyles.backgroundColor
        btn.style.backgroundImage = 'url(' + commonAttr.itemStyles.btnBgUrl + ')'
      }
    },
  },
}


